<template>
    <div class="page-menu">
        <div class="PPT">
            <img class="pics" alt="error" :src="picList[picNum]">
            <div class="buttons">
                <div v-for="num in picList.length" @click="changePic(num-1)"></div>
            </div>
            <div class="last-button" @click="changePic(picNum-1)"><span class="iconfont icon-shouqi1"></span></div>
            <div class="next-button" @click="changePic(picNum+1)" ><span class="iconfont icon-shouqi1"></span></div>
        </div>
        
    </div>

</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, watch,computed, onUnmounted } from 'vue';
const picList = [
    "http://localhost:5173/src/assets/bg1.jpg",
    "http://localhost:5173/src/assets/bg2.jpg",
    "http://localhost:5173/src/assets/bg3.jpg"
]
const PPTdelay=5000;const startNum=0;
let picNum = ref(startNum);let pptTimer=0;
function changePic(n: number) {   
    if(n<0){
        n=picList.length-1;
    }else if(n>=picList.length){
        n=0;
    }
    picNum.value=n;
    autoplayPPT(PPTdelay);
    //手动更改图片的函数,清除定时器一段时间后重新创建,防抖
}

function autoplayPPT(delay:number){//自动播放图片,自带防抖
let num=picNum.value;
 clearInterval(pptTimer);
pptTimer=setInterval(()=>{
        num=(++num)%picList.length;
        picNum.value=num;
    },delay)
}

onMounted(() => {
    const buttons=document.querySelectorAll(".buttons>div")
    autoplayPPT(PPTdelay)
    watch(picNum,(newval,oldval)=>{
        buttons[newval].style.backgroundColor="blue";
        buttons[oldval].style.backgroundColor="white";
    })
   
})
onUnmounted(()=>{
    clearInterval(pptTimer);
})
</script>

<style scoped lang="scss" src="./mainMenu-style.scss">

</style>